<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <!--

        Written by sk89q <http://sk89q.therisenrealm.com>
        Copyright 2008 sk89q. All rights reserved.

        Redistribution and use in source and binary forms, with or without 
        modification, are permitted provided that the following conditions 
        are met:
        
        1. Redistributions of source code must retain the above 
           copyright notice, this list of conditions and the following 
           disclaimer.
        2. Redistributions in binary form must reproduce the above
           copyright notice, this list of conditions and the following 
           disclaimer in the documentation and/or other materials provided 
           with the distribution.
        
        THIS SOFTWARE IS PROVIDED BY SK89Q "AS IS" AND ANY EXPRESS 
        OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 
        WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
        ARE DISCLAIMED. IN NO EVENT SHALL SK89Q BE LIABLE FOR ANY DIRECT, 
        INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 
        (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 
        SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) 
        HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, 
        STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 
        ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF 
        ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

    -->
    <head>
        <title>JavaScript Song Player</title>
        <script src="../../modules.js?./reprise.js"></script>
        <style type="text/css">
            <!--/*--><![CDATA[/*><!--*/
            body {
                background: #FFFFFF;
                color: #000000;
                margin: 0;
                padding: 20px;
            }
            body, th, td {
                font: 11pt Arial, sans-serif;
            }
            h1 {
                font-size: 1.7em;
                margin-top: 0;
            }
            a:link, a:visited {
                color: #800000;
                text-decoration: none;
                border-bottom: 1px solid #CCCCCC;
            }
            a:hover, a:active {
                color: #000000;
                border-color: #000000;
            }
            fieldset {
                margin: 0 0 15px 0;
                padding: 6px 10px 15px 10px;
                border: 1px solid #CCCCCC;
            }
            legend {
                padding: 3px;
                background: #EFEFEF;
                font-size: 1em;
                font-weight: bold;
            }
            table.form {
                margin: 5px 0 5px 0;
            }
            table.form th {
                padding: 0 15px 2px 0;
                text-align: right;
                font-weight: bold;
                vertical-align: top;
            }
            table.form td {
                padding: 0 15px 2px 0;
            }
            #player-container {
                border: 3px solid #CC0000;
            }
            #author { 
                margin: 100px 0 0 0;
            }
            /*]]>*/-->
        </style>
    </head>
    <body>

        <h1>JavaScript Song Player</h1>

        <p><a href="http://sk89q.therisenrealm.com/2008/11/dynamically-generating-a-wav-in-javascript/">http://sk89q.therisenrealm.com/2008/11/dynamically-generating-a-wav-in-javascript/</a></p>

        <p>This plays a song by generating (many) .wav files on-the-fly and playing them all
        through an EMBED tag linked by a <a href="http://en.wikipedia.org/wiki/Data_URI_scheme">data URI</a>. <strong>No
        external files are used to play the song.</strong> You can save the source of this page and it will
        work anywhere you try it. Due to the length limit of data: URIs, multiple .wav files are used.</p>

        <ul>
            <li>This has been tested to work on Firefox, Opera, Safari, and Chrome.</li>
            <li>You need to have a plugin to play the .wav files, and it must support "auto-play."</li>
        </ul>

        <form action="#" method="get">
        <fieldset>
            <legend>Parameters</legend>
            
            <table border="0" cellspacing="0" cellpadding="0" class="form">
                <tr>
                    <th><label for="channels">Channels</label></th>
                    <td><input type="text" name="channels" id="channels" size="2" value="1" /></td>
                </tr>
                <tr>
                    <th><label for="sampleRate">Sample rate</label></th>
                    <td><input type="text" name="sampleRate" id="sampleRate" size="4" value="4024" /> Hz</td>
                </tr>
                <tr>
                    <th><label for="bitDepth">Bit depth</label></th>
                    <td><input type="text" name="bitDepth" id="bitDepth" size="2" value="16" /> bits/sample</td>
                </tr>
                <tr>
                    <th><label for="volume">"Volume"</label></th>
                    <td><input type="text" name="volume" id="volume" size="6" value="32767" /></td>
                </tr>
                <tr>
                    <th><label for="song">Song:</label></th>
                    <td><textarea name="song" id="song" rows="10" cols="60">
# Reprise from "Spirited Away"

@tempo  89
4   G   quar
5   D   quar.
4   G   eighth
4   F#  quar
5   D   quar.
5   D   eighth
5   E   quar
5   D   quar
5   C   quar
5   D   half
5   E   eighth
5   F#  eighth
5   G   quar
5   F#  quar
5   E   quar
5   D   quar
5   G   quar
4   G   eighth
4   A   eighth
4   B   quar.
5   E   eighth
4   B   eighth
4   G   eighth
4   A   half.
4   G   quar
5   D   quar.
4   G   eighth
4   F#  quar
5   D   quar+eighth
5   D   eighth
5   E   quar
5   D   quar
5   C   quar
5   D   half
5   E   eighth
5   F#  eighth
5   G   quar
5   F#  quar
5   E   quar
5   D   quar
5   G   quar
4   B   quar
5   C   quar
4   E   eighth
4   F#  eighth
4   B   eighth
4   A   eighth
4   G   quar.
</textarea><br />
        The format is as follows: OCTAVE NOTE LENGTH<br />
        OCTAVE is an integer between 0 and 9, inclusive<br />
        NOTE is one of C, C#, D, D#, E, F, F#, G, G#, A, A#, B<br />
        LENGTH is whole, half, quar, eight, or sixth<br />
        For dotted notes, put a dot immediately after the length word; ex. quar.<br />
        To combine note lengths, use a plus; ex. quar.+half<br />
        Comments begin with a hash mark (#)<br />
        To set tempo, use @tempo TEMPO</td>
                </tr>
            </table>
            <p><input type="button" id="playButton" value="Play Song" /> <input type="button" id="stopButton" value="Stop" disabled="disabled" /></p>
        </fieldset>
        </form>

        <div id="author">Written by <a href="http://sk89q.therisenrealm.com">sk89q</a>.</div>
    </body>
</html>
